<template>
    <el-carousel v-if="false" :interval="10000" height="400px" indicator-position="outside">
        <el-carousel-item v-for="item in 4" :key="item">
            <div class="carousel_content_container" :style="{
                'background-image': 'url(' + require('../assets/img/banner.webp') + ')',
            }">
                <div class="carousel_content">
                    <h3>阳过之后，你需要换一只牙刷吗？</h3>
                    <small>随着感染新冠病毒的人越来越多，很多人考虑的问题正在从“阳了之后该怎么办”
                        逐渐变为“转阴之后该怎么办”。比如说，原来的化妆品、日用品上会有新冠病毒的残留吗？</small>
                    <button>查看</button>
                </div>
            </div>
        </el-carousel-item>
    </el-carousel>
    <el-row style="padding:0 20px">
        <el-col :span="5">
            <el-card class="box-card">
                <template #header>
                    <div class="card-header">
                        <span>调查问卷</span>
                        <el-button class="button" text><router-link to="/survey">查看更多</router-link></el-button>
                        <el-icon>
                            <RefreshLeft />
                        </el-icon>
                    </div>
                </template>
                <div v-for="o in 4" :key="o" class="text item">{{ 'List item ' + o }}</div>
            </el-card>
            <el-divider />
            <el-card class="box-card">
                <template #header>
                    <div class="card-header">
                        <span>最新活动</span>
                        <el-button class="button" text><router-link to="/activity">查看更多</router-link></el-button>
                        <el-icon @click="getActivityList">
                            <RefreshLeft />
                        </el-icon>
                    </div>
                </template>
                <div v-loading="activityList == null">
                    <el-alert v-for="activity in activityList" :key="activity.activityId"
                        :title="activity.activityTitle" :type="activity.stageType" :description="activity.activityDesc" />
                </div>
                <el-empty description="当前暂时还没有任何活动" v-if="activityList != null && activityList.length == 0" />
            </el-card>
        </el-col>
        <el-col :span="12" :offset="1">
            <el-card class="box-card">
                <template #header>
                    <div class="card-header">
                        <span>最新贴文</span>
                        <el-button class="button" text><router-link to="/post">查看更多</router-link></el-button>
                        <el-icon @click="refreshArticle">
                            <RefreshLeft />
                        </el-icon>
                    </div>
                </template>
                <div v-loading="articleList == null" v-for="article in articleList" :key="article.articleId">
                    <article-component :title="article.articleTitle" :desc="article.articleDesc"
                        :authorPic="article.authorPicUrl" :cover="article.articleCoverUrl" :id="article.articleId"
                        :eye="article.articleEye" :comment-count="article.commentCount" :timestamp="article.articleDate"
                        :nickName="article.articleNickname" />
                    <el-divider border-style="dotted" />
                </div>
                <el-empty description="这里空空如也" v-if="articleList != null && articleList.length == 0" />
            </el-card>
        </el-col>
        <el-col :span="5" :offset="1">
            <el-card class="box-card">
                <template #header>
                    <div class="card-header">
                        <span>{{ this.$store.state.area.collegeId == 0 ? '公告' : '学院公告' }}</span>
                        <el-button class="button" text><router-link to="/notice">查看更多</router-link></el-button>
                        <el-icon @click="getLastCollegeNotice(this.$store.state.area.collegeId)">
                            <RefreshLeft />
                        </el-icon>
                    </div>
                </template>
                <div v-loading="collegeNoticeList == null">
                    <el-alert v-for="notice in collegeNoticeList" :key="notice.noticeId" :title="notice.noticeTitle"
                        :description="notice.noticeContent" :type="notice.noticeLevel" show-icon />
                    <el-empty description="暂时还没有任何公告"
                        v-if="collegeNoticeList != null && collegeNoticeList.length == 0" />
                </div>
            </el-card>
            <el-divider />
            <el-card class="box-card"
                v-show="this.$store.state.area.collegeId == this.$store.state.user.collegeId">
                <template #header>
                    <div class="card-header">
                        <span>班级公告</span>
                        <el-button class="button" text><router-link to="/notice">查看更多</router-link></el-button>
                        <el-icon @click="getLastGroupNotice(this.$store.state.user.group.groupId)">
                            <RefreshLeft />
                        </el-icon>
                    </div>
                </template>
                <div v-loading="groupNoticeList == null">
                    <el-alert v-for="notice in groupNoticeList" :key="notice.noticeId" :title="notice.noticeTitle"
                        :description="notice.noticeContent" :type="notice.noticeLevel" show-icon />
                    <el-empty description="暂时还没有任何公告" v-if="groupNoticeList != null && groupNoticeList.length == 0" />
                </div>
            </el-card>
        </el-col>
    </el-row>
</template>
<script>
import ArticleComponent from './ArticleComponent.vue';

export default {
    name: "IndexComponent",
    components: { ArticleComponent },
    data() {
        return {
            articleList: null,
            groupNoticeList: null,
            collegeNoticeList: null,
            activityList: null
        }
    },
    created() {
        this.getCollegeArticleList(this.$store.state.area.collegeId, 1, 6)
        this.getActivityList()
    },
    methods: {
        getCollegeArticleList(collegeId, page, pageSize) {
            this.articleList = null
            this.$fetchutil.get('/browse/article/article_college?collegeId=' + collegeId + '&page=' + page + '&pageSize=' + pageSize, data => {
                this.articleList = data.data.data
                this.getLastCollegeNotice(this.$store.state.area.collegeId)
                if (this.$store.state.user.group == null) return
                this.getLastGroupNotice(this.$store.state.user.group.groupId)
            })
        },
        getActivityList() {
            this.activityList=null
            let collegeId = this.$store.state.area.collegeId
            this.$fetchutil.get('/browse/activity/activity_list?&collegeId=' + collegeId, data => {
                if (data.data != null) this.activityList = data.data.data
            })
        },
        refreshArticle() {
            this.articleList = null
            this.getCollegeArticleList(this.$store.state.area.collegeId, 1, 6)
        },
        getLastGroupNotice(groupId) {
            if (this.$store.state.area.collegeId == 0) return
            this.groupNoticeList = null
            this.$request.get('/notice/notice_list?column=group&value=' + groupId).then(data => {
                this.groupNoticeList = data.data.data
            })
        },
        getLastCollegeNotice(collegeId) {
            this.collegeNoticeList = null
            this.$fetchutil.get('/browse/notice_list?column=college&value=' + collegeId, data => {
                this.collegeNoticeList = data.data.data
            })
        }
    },
    watch: {
        '$store.state.area.collegeId'() {
            this.getCollegeArticleList(this.$store.state.area.collegeId, 1, 6)
            this.getLastCollegeNotice(this.$store.state.area.collegeId)
            this.getActivityList()
        },
        '$store.state.user.group.groupId'() {
            if (this.$store.state.user.group == null) return
            this.getLastGroupNotice(this.$store.state.user.group.groupId)
        },
        articleList() {
            if (this.articleList == null || this.articleList == []) return
            this.articleList.sort((article1, article2) => article2.articleDate - article1.articleDate)
        },
        activityList(){
            if(this.activityList==null)return
            this.activityList.forEach(activity=>{
                let timestamp=new Date().getTime()
                if(activity.activityArrange<=timestamp&&timestamp<=activity.activityStage)
                    activity.stageType='warning'
                else if(activity.activityStage<=timestamp&&timestamp<=activity.activityDone)
                    activity.stageType='success'
                else activity.stageType='info'
            })
        },
        groupNoticeList() {
            if (this.groupNoticeList == null || this.groupNoticeList == []) return
            this.groupNoticeList.forEach(notice => {
                switch (notice.noticeLevel) {
                    case '警告': notice.noticeLevel = 'warning'
                        break
                    case '错误': notice.noticeLevel = 'error'
                        break
                    case '成功': notice.noticeLevel = 'success'
                        break
                    default: notice.noticeLevel = 'info'
                }
            })
            this.groupNoticeList.sort((notice1, notice2) => notice2.noticeDate - notice1.noticeDate)
        },
        collegeNoticeList() {
            if (this.collegeNoticeList == null || this.collegeNoticeList == []) return
            this.collegeNoticeList.forEach(notice => {
                switch (notice.noticeLevel) {
                    case '警告': notice.noticeLevel = 'warning'
                        break
                    case '错误': notice.noticeLevel = 'error'
                        break
                    case '成功': notice.noticeLevel = 'success'
                        break
                    default: notice.noticeLevel = 'info'
                }
            })
            this.collegeNoticeList.sort((notice1, notice2) => notice2.noticeDate - notice1.noticeDate)
        }
    }
};
</script>
<style scoped>
.carousel_content {
    height: fit-content;
    padding: 15px;
    width: 300px;
    margin-top: auto;
    margin-bottom: auto;
    margin-left: 200px;
    border-radius: 10px;
    background-color: rgba(51, 51, 51, 0.3);
}

.carousel_content button {
    display: block;
    width: 100px;
    border: 2px solid white;
    margin: auto;
    height: 40px;
    color: white;
    font-size: 18px;
    background-color: rgba(255, 255, 255, 0.3);
}

.carousel_content_container {
    height: 100%;
    display: flex;
    background-size: 100% 100%;
    background-position: center;
}

.carousel_content h3 {
    color: white;
}

.carousel_content small {
    color: white;
    display: block;
    margin: 20px auto;
}

.el-carousel__item {
    height: 100%;
}

.card-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
}

a {
    text-decoration: none;
    color: var(--el-button-text-color);
}
</style>